<script setup lang="ts">import { ELoadMoreStatus } from '@/common/enums';
import { useToPage } from '@/common/use/common';
import { onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref, watch } from 'vue';

interface IProps {
  /**
   * 是否开启上拉加载更多组件
   */
  more?: boolean,
  /**
   * 上拉加载更多状态
   */
  moreStatus?: ELoadMoreStatus
}
interface IEmits {
  /**
   * 上拉加载触发更多回调
   */
  (e: 'load-more'): void
  (e: 'update:moreStatus', value: ELoadMoreStatus): void
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  more: true,
  moreStatus: ELoadMoreStatus.MORE
});
const state = reactive({
  status: props.moreStatus
});
const { navigateTo } = useToPage();

// typescript
const test = ref([
  {title: "Vivo XPlay6 新款畅销曲面屏手机", thumb: "1.png", price: 6000, sale: 16672, params: ["4GB", "6.5英寸"]},
  {title: "强悍游戏手机Vivo nova 7 Plus", thumb: "2.png", price: 3000, sale: 19672, params: ["4GB", "6.5英寸"]},
  {title: "办公设计游戏 1TB 硬盘单独主机", thumb: "3.png", price: 8000, sale: 16672, params: ["4GB", "6.5英寸"]},
  {title: "健康、运动智能手表/手环/腕表", thumb: "4.png", price: 5000, sale: 15672, params: ["4GB", "6.5英寸"]},
  {title: "多功能音响设备支持多品牌手机机型", thumb: "5.png", price: 2000, sale: 16672, params: ["4GB", "6.5英寸"]},
  {title: "Apple新品折叠刘海屏超级屏幕手机", thumb: "6.png", price: 7000, sale: 14672, params: ["4GB", "6.5英寸"]},
]);

// 上拉触底事件
onReachBottom(() => {
  // 已经加载完毕、加载中的不再触发
  if (state.status == ELoadMoreStatus.NOMORE || state.status == ELoadMoreStatus.LOADING) {
    return
  }

  state.status = ELoadMoreStatus.LOADING;
  emits('update:moreStatus', state.status);
  emits('load-more');
  // 模拟关闭
  setTimeout(() => {
    state.status = ELoadMoreStatus.NOMORE;
    emits('update:moreStatus', state.status);
  }, 1000);
});

watch(() => props.moreStatus, () => {
  if (!props.more) {
    return
  }
  state.status = props.moreStatus;
});
</script>

<!-- 商品卡片列表 -->
<template>
  <view class="w-components-container w-commodity-card-list">
    <view class="list-view">
      <template v-for="item in test">
        <view class="item" hover-class="hover-class" @click="navigateTo('/pages/commodity-detail/commodity-detail?commodityId=1234')">
          <view class="thumb">
            <image :src="'../../static/images/delete/goods/' + item.thumb"></image>
          </view>
          <view class="title ellipsis-2">
            <text>{{ item.title }}</text>
          </view>
          <view class="params">
            <template v-for="param in item.params">
              <text>{{ param }}</text>
            </template>
          </view>
          <view class="info">
            <text>￥{{ item.price }}</text>
            <text>已售{{ item.sale }}件</text>
          </view>
        </view>
      </template>

      <!-- 空组件 -->
      <template v-if="!test.length">
        <w-empty text="暂无推荐"></w-empty>
      </template>

      <!-- 上拉加载更多组件 -->
      <view class="load-more" v-if="more">
        <uni-load-more :status="state.status"></uni-load-more>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.list-view {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 50%;
    border-bottom: 1px solid $border-color;
    padding: 30rpx 0;

    &:nth-child(odd) {
      width: calc(50% - 1px);
      border-right: 1px solid $border-color;
    }

    .thumb {
      text-align: center;
      image {
        width: 280rpx;
        height: 280rpx;
      }
    }

    .title {
      padding: 0 $padding;
      color: $text-color;
    }

    .params {
      margin: 10rpx $padding;
      background-color: #f2f2f2;
      display: inline-block;
      padding: 2rpx 8rpx;
      border-radius: 2px;

      text {
        color: #BCBCBC;
        
        &:not(:last-child) {
          margin-right: 10rpx;
        }
      }
    }

    .info {
      padding: 0 $padding;
      display: flex;
      justify-content: space-between;

      text {
        &:first-child {
          font-size: 28rpx;
          color: $amount-color;
        }

        &:last-child {
          font-size: 24rpx;
          color: #BCBCBC;
        }
      }
    }
  }
}

.load-more {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>